<template>
    <div>
        <div style="display: flex;align-items: center;margin-top:30px;margin-left: 60px;">
            <img src="../../../static/线条 1@1x.png" alt="">
            <span style="margin-left: 10px; font-size: 30px; color: #415058; font-weight: bold;">学习情绪</span>
        </div>
        <div class="emotionchart" id="emotion"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default{
    mounted() {
        

var chartDom = document.getElementById('emotion');
var myChart = echarts.init(chartDom);
var option;

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '0%',
    left: 'center'
  },
  series: [
    {
      name: '情绪时长',
      type: 'pie',
      radius: ['60%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '愉悦' },
        { value: 735, name: '困惑' },
        { value: 580, name: '好奇' },
        { value: 484, name: '焦虑' },
        { value: 300, name: '自信' },
        { value: 300, name: '挑战' },
        { value: 300, name: '沮丧' }
      ]
    }
  ]
};

option && myChart.setOption(option);


option && myChart.setOption(option);
    },
}
</script>

<style>
  .emotionchart {
    width: 400px;
    height: 300px;
    margin-left: 90px;
    margin-top: 0px;
  }

</style>